<template>
	<view>
		<!-- 商铺列表 -->
		<view class="project-recommend">
			<view class="acea-row row-middle project" v-for="item in list" :key="item.id"
				@click="toPages('/pages/details/project/project?id='+item.id)">
				<!-- 				<view class="project-tag-gray">
					住宅
				</view> -->
				<view class="img">
					<image v-if="item.photoVideo" :src="item.photoVideo?item.photoVideo.split(',')[0]:''" mode=""></image>
					<image v-if="item.photo_video" :src="item.photo_video?item.photo_video.split(',')[0]:''" mode=""></image>
					<!-- 		<view class="acea-row row-middle distance">
						<image src="@/static/images/location.png" mode=""></image>
						<text>距您1.4km</text>
					</view> -->
				</view>
				<view class="info">
					<view class="name line1">{{item.name}} </view>
					<view class="address line1">长沙市 | {{item.address}}</view>
					<view class="sell-now">在售 4500套</view>
					<view class="acea-row row-middle house">
						<!-- <view class="tag">住宅</view> -->
						<view class="red-price" v-if="item.residentialPrice"> {{item.residentialPrice}}<text>元/㎡</text></view>
						<view class="red-price" v-if="item.residential_price"> {{item.residential_price}}<text>元/㎡</text></view>
						<!-- <view class="sell-status">售125丨租130</view> -->
					</view>
					<view class="acea-row row-middle shop">
						<view class="tag">商铺</view>
						<view class="gray-price" v-if="item.commercialPrice"> {{item.commercialPrice}}<text>元/㎡</text></view>
						<view class="gray-price" v-if="item.commercial_price"> {{item.commercial_price}}<text>元/㎡</text></view>
						<!-- <view class="sell-status">售50丨租 30</view> -->
					</view>
				</view>
			</view>
			<!-- 			<view class="acea-row row-middle project">
				<view class="project-tag-gray">
					写字楼
				</view>
				<view class="img">
					<image src="" mode=""></image>
					<view class="acea-row row-middle distance">
						<image src="@/static/images/location.png" mode=""></image>
						<text>距您1.4km</text>
					</view>
				</view>
				<view class="info">
					<view class="name line1">万科三万英尺 </view>
					<view class="address line1">长沙市 | 雨花区-人民东路57号</view>
					<view class="sell-now">在售 4500套</view>
					<view class="acea-row row-middle house">
						<view class="tag">写字楼</view>
						<view class="red-price"> 10000<text>元/㎡</text></view>
						<view class="sell-status">售125丨租130</view>
					</view>
					<view class="acea-row row-middle shop">
						<view class="tag">商铺</view>
						<view class="gray-price"> 10000<text>元/㎡</text></view>
						<view class="sell-status">售50丨租 30</view>
					</view>
				</view>
			</view>
			<view class="acea-row row-middle project">
				<view class="project-tag-gray">
					公寓
				</view>
				<view class="img">
					<image src="" mode=""></image>
					<view class="acea-row row-middle distance">
						<image src="@/static/images/location.png" mode=""></image>
						<text>距您1.4km</text>
					</view>
				</view>
				<view class="info">
					<view class="name line1">万科三万英尺 </view>
					<view class="address line1">长沙市 | 雨花区-人民东路57号</view>
					<view class="sell-now">在售 4500套</view>
					<view class="acea-row row-middle house">
						<view class="tag">住宅</view>
						<view class="red-price"> 10000<text>元/㎡</text></view>
						<view class="sell-status">售125丨租130</view>
					</view>
					<view class="acea-row row-middle shop">
						<view class="tag">商铺</view>
						<view class="gray-price"> 10000<text>元/㎡</text></view>
						<view class="sell-status">售50丨租 30</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>

	export default {
		name:'projectList',
		props:{
			list:{
				type:Array,
				default:()=>{
					return [1,1,1]
				}
			},
			canClose:{
				type:Boolean,
				default:()=>{
					return false
				}
			},
			detail:{
				type:Object,
				default:()=>{
					return {}
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			toPages(path) {
				uni.navigateTo({
					url: path
				})
			},
		}
	}
</script>

<style lang="scss">
	.project-recommend {
		padding: 30rpx 28rpx;

		.project~.project {
			margin-top: 24rpx;
		}

		.project {
			padding: 30rpx;
			border-radius: 10px;
			background: rgba(255, 255, 255, 1);
			position: relative;

			.project-tag-gray {
				width: 70rpx;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				font-size: 22rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
				border-radius: 4rpx;
				background: rgba(242, 242, 242, 1);
				position: absolute;
				right: 28rpx;
				top: 30rpx
			}

			.img {
				width: 216rpx;
				height: 202rpx;
				border-radius: 10rpx;
				position: relative;
				background: #e3e3e3;

				image {
					width: 216rpx;
					height: 202rpx;
				}

				.distance {
					padding: 12rpx;
					width: 100%;
					position: absolute;
					bottom: 0;
					left: 0;
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					line-height: 42rpx;

					image {
						width: 14rpx;
						height: 16rpx;
					}
				}
			}

			.info {
				width: calc(100% - 230rpx);
				height: 202rpx;
				margin-left: 12rpx;

				.name {
					width: 260rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 1);
				}

				.address {
					padding: 0;
					width: 100%;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(125, 125, 125, 1);
				}

				.sell-now {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 36rpx;
					color: rgba(125, 125, 125, 1);
				}

				.sell-status {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(196, 196, 196, 1);
				}

				.red-price {
					min-width: 40%;
					font-size: 30rpx;
					font-weight: 700;
					color: rgba(238, 33, 45, 1);

					text {
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);
					}
				}

				.gray-price {
					min-width: 40%;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(125, 125, 125, 1);

					text {
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(125, 125, 125, 1);
					}

				}

				.house {
					.tag {
						// width: 58rpx;
						padding: 0 4rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						border-radius: 4rpx;
						background: rgba(238, 33, 45, 1);
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
					}
				}

				.shop {
					.tag {
						width: 58rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						border-radius: 4rpx;
						background: rgba(242, 242, 242, 1);
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(125, 125, 125, 1);
					}
				}
			}
		}
	}

	.fixed-top {
		width: 100%;
		background: #EE212D;
		position: fixed;
		top: 0;
		left: 0;
		height: 122rpx;
		z-index: 999;
		background: linear-gradient(90deg, #EE212D 0%, #EE212D 100%);
	}

	.search-header {
		width: 100%;
		padding: 26rpx;
		background: #EE212D;

		image {
			width: 28rpx;
			height: 32rpx;
			margin-right: 34rpx;
		}

		.search-map {
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			text-align: center;

			image {
				width: 40rpx;
				height: 36rpx;
			}
		}
	}

	.search-box {
		// width: 586rpx;
		flex: 1;
		height: 70rpx;
		opacity: 1;
		border-radius: 36rpx;
		background: rgba(255, 255, 255, 1);
		padding: 12rpx 32rpx;

		.search-ipt {
			display: flex;
			align-items: center;
			color: rgba(166, 166, 166, 1);

			text {
				padding: 0 16rpx 0 0rpx;
			}
		}
	}

</style>